import { useState, useEffect } from 'react'
import { Layout, Menu, Affix, Row, Col, Tooltip, Breadcrumb } from 'antd';
// import {Breadcrumb, Button, BackTop } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import styles from './index.less';
import Person from './components/Person';
import { HomeOutlined, ReadOutlined, FileImageOutlined, EditOutlined, StarOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import SocialAccount from './components/SocialAccount';
import MyBackTop from './components/MyBackTop';

const { Header, Content, Footer } = Layout;

export default (props) => {

  const navs = [{
    key: '',
    name: '主页',
    icon: <HomeOutlined />
  },
  {
    key: 'article',
    name: '文章',
    icon: <ReadOutlined />
  },
  {
    key: 'album',
    name: '相册',
    icon: <FileImageOutlined />
  },
  {
    key: 'essay',
    name: '随笔',
    icon: <EditOutlined />
  },
  {
    key: 'other',
    name: '其他',
    icon: <StarOutlined />
  },]

  const [selectedKeys, setSelectedKeys] = useState(['home'])

  // 监听路由
  useEffect(() => {
    // componentDidMount
    const unlisten = props.history.listen((location, action) => {
      let name = location.pathname || '/';
      const url = name.split('/')[1];
      setSelectedKeys([url])
    });
    return () => {
      // componentWillUnmount
      unlisten();
    }
  }, [props.history])

  // 点击Logo
  const handleLogoClick = () => {
    // 手动push到home页
    props.history.push('/');
  };

  // 面包屑处理
  const { routes } = props.route
  const pathSnippets = props.location.pathname.split('/').filter(i => i);
  console.log('pathSnippets', pathSnippets);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    const route = routes.find(r => r.path === url);
    console.log(url, route);
    if (route != null)
      return (
        <Breadcrumb.Item key={url}>
          <Link to={url}>{route.title}</Link>
        </Breadcrumb.Item>
      );
  });

  // 面包屑
  const breadcrumbItems = [
    <Breadcrumb.Item key="/" >
      <Link to="/"><HomeOutlined /></Link>
    </Breadcrumb.Item >,
  ].concat(extraBreadcrumbItems);

  return (
    <Layout className={styles.layout}>
      <Header className={styles.header} style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
        <div className={styles.headerInner}>
          <div className={styles.logo} onClick={handleLogoClick}>
            <span dataHeading={'好风凭借力'}>好风凭借力</span>
          </div>
          <Menu theme="light" mode="horizontal" defaultSelectedKeys={['home']} selectedKeys={selectedKeys} >
            {
              navs.map((nav) => {
                const { key, name, icon } = nav;
                return <Menu.Item key={key} icon={icon}>
                  <Link to={`/${key}`}>
                    {name}
                  </Link>
                </Menu.Item>;
              })
            }
          </Menu>
        </div>

      </Header >

      <Content className={styles['content-container-wrapper']} style={{ marginTop: 64 }} >

        <div className={styles['content-container']} >
          <GridContent contentWidth='Fixed' className={styles['grid-content-container']}>
            <Row gutter={[10, 10]}>
              <Col md={24} lg={17} className={styles['col-left']} >
                <div className={styles.left} style={{ boxShadow: '0 1px 3px rgb(18 18 18 / 10%)', minHeight: '70vh' }}>

                  <Breadcrumb className={styles['breadcrumb']}>
                    {breadcrumbItems}
                  </Breadcrumb>
                  {props.children}

                </div>
              </Col>
              <Col md={24} lg={7} className={styles['col-right']}>
                <div className={styles.right}>

                  <Person />
                  <Affix offsetTop={60}>
                    <SocialAccount />
                  </Affix>

                </div>
              </Col>
            </Row>
          </GridContent>
        </div>


      </Content>

      <MyBackTop></MyBackTop>
      <Footer style={{ textAlign: 'center' }}>
        <span>jielihaofeng.online ©2023 </span>
        <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023154589号-1</a>
      </Footer>

    </Layout >
  )
}

